<template>
    <div class="useryou">
        <van-nav-bar title="优惠券">
            <van-icon name="cross" slot="left" @click="backOne()"/>
            <van-icon name="ellipsis" slot="right" />
        </van-nav-bar>  
        <div class="zi">
            <p>翡翠大课堂</p>
            <span>玩转翡翠的奥秘</span>
            <div class="xue">
                <p>学习课程使用优惠券</p>
            </div>
        </div>
        <div class="cheng">
            <div class="you">
                <div class="you-left">
                    <div class="jia">
                        <p>￥<span>20</span></p>
                    </div>
                    <div class="juan">
                        <p>课程使用券</p>
                        <span>20元加速包</span>
                    </div>
                </div>
                <div class="you-right">
                    <p>立即使用</p>
                </div>
            </div>
            <div class="you">
                <div class="you-left">
                    <div class="jia">
                        <p>￥<span>20</span></p>
                    </div>
                    <div class="juan">
                        <p>课程使用券</p>
                        <span>20元加速包</span>
                    </div>
                </div>
                <div class="you-right">
                    <p>立即使用</p>
                </div>
            </div>
            <div class="you">
                <div class="you-left">
                    <div class="jia">
                        <p>￥<span>20</span></p>
                    </div>
                    <div class="juan">
                        <p>课程使用券</p>
                        <span>20元加速包</span>
                    </div>
                </div>
                <div class="you-right">
                    <p>立即使用</p>
                </div>
            </div>
            <div class="you">
                <div class="you-left">
                    <div class="jia">
                        <p>￥<span>20</span></p>
                    </div>
                    <div class="juan">
                        <p>课程使用券</p>
                        <span>20元加速包</span>
                    </div>
                </div>
                <div class="you-right">
                    <p>立即使用</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import problem from "@/views/problem.vue"
export default {
    name:'useryou',
    methods:{
        
    },
    methods:{
        backOne(){
            this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
html,body{
    height: 100%;
    width:100%;
}
.van-nav-bar{
    text-align: left;
    background:rgba(242,242,242,1);
}
.van-nav-bar__left .van-nav-bar__text {
    color: black;
    font-size: 3rem;
}
.van-nav-bar__title{
    max-width: 70%;
}
.van-icon, .van-icon::before{
    font-size: 20px;
    color: black
}
.van-icon-arrow:before{
    font-size: 1.5rem;
    color: rgba(210,210,210,1)
}
.van-cell{
    padding: 20px 16px;
}
.van-cell__left-icon{
    font-size: 0.5rem;
}
.van-cell__title {
    font-family:PingFang SC;
    font-size: 1rem;
}
.useryou{
    position:absolute;
    width:100%;
    height: 100%;
    background: url(../assets/img/优惠券背景.png) no-repeat;
    background-size: 100% 100%;
}
.van-nav-bar{
    text-align: left;
    background: none;
}
.van-nav-bar__left .van-nav-bar__text {
    color: #ffffff;
    font-size: 3rem;
}
.van-nav-bar__title{
    max-width: 70%;
    color: #ffffff;
}
.van-icon, .van-icon::before{
    font-size: 20px;
    color: #ffffff;
}
.van-icon-arrow:before{
    font-size: 1.5rem;
    color: rgba(210,210,210,1)
}
.van-hairline--bottom::after{
    border:none;
}
.van-cell{
    padding: 20px 16px;
}
.van-cell__left-icon{
    font-size: 0.5rem;
}
.van-cell__title {
    font-family:PingFang SC;
    font-size: 1rem;
}
.zi{
    width: 100%;
    height:233px;
    position: relative;
    top: -37px;
}
.zi p{
    font-size: 55px;
    color:#ffffff;
    margin-left: 59.5px;
}
.zi span{
    font-size: 40px;
    color: #ffffff;
    position: relative;;
    bottom: 50px;left: 58px;
}
.zi .xue{
    width:269px;
    height:33.5px;
    background: #3CD333;
    border-radius: 17px;
    margin: 0 auto;
    position: relative;
    bottom: 32px;
}
.xue p{
    font-size: 15px;
    color: #ffffff;
    font-weight:bold;
    line-height: 33.5px;
}
.cheng{
    height:372px;
    background: #A493F7;
    border-radius: 10px;
    position: absolute;
    top: 286px;
    left: 20.5px;
}
.you{
    width:307.5px;
    height:80px;
    background: url(../assets/img/youqian.png) no-repeat;
    background-size:cover;
    position: relative;
    top: 12px;
    right: 12px;
    margin: 12px 0 0 34px;
}
.you-left{
    width:221.5px;
    position: relative;
}
.jia{
    position: absolute;
    left: 9px;
}
.jia p{
    font-size: 12px;
    color: #FA802E;
}
.jia span{
    font-size: 37.5px;
    color: #FA802E;
}
.juan{
    position: absolute;
    left: 97px;
}
.juan p{
    font-size: 14.5px;
    color: #212121;
}
.juan span{
    width: 64px;
    height:15px;
    background: #FB812F;
    border-radius:4.5px; 
    color: #FFFFFF;
    font-size: 9px; 
    text-align: center;
    line-height: 15px;
    position: absolute;
    bottom: -8px;
    left: 0px;
}
.you-right{
    width:80px;
    height: 80px;
    position: absolute;
    left: 230px;
}
.you-right p{
    color: #F4F4F4;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
}
</style>